<template>
  <el-card class="middle-view">
      <template #header>
          <!-- el-menu组件 -->
          <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">销售额</el-menu-item>
              <el-menu-item index="2">访问量</el-menu-item>
          </el-menu>
            <div class="right">
                <el-radio-group v-model="time1" size="small">
                    <el-radio-button label="今日"></el-radio-button>
                    <el-radio-button label="本周"></el-radio-button>
                    <el-radio-button label="本月"></el-radio-button>
                    <el-radio-button label="今年"></el-radio-button>
                </el-radio-group>
                <!-- 日期选择器 -->
                <el-date-picker
                    value-format="yyyy-MM-dd"
                    size="small"
                    v-model="time2"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
            </div>
      </template>
      <div class="content">
          <v-chart class="echarts" :option="getOption()">图表</v-chart>
          <div class="rank-list">
              <div class="title" >门店{{activeIndex === '1' ? '销售额':'访问量'}}排名</div>
              <!-- <div class="title">门店销售额排名</div> -->
              <div class="list">
                  <div class="item" v-for="item in ranklist " :key='item.no'>
                      <!-- <div class="no" :class="item.no <'4' ? 'top':'null' ">{{item.no}}</div> -->
                      <div class="no" :class="{top: item.no <='3'}">{{item.no}}</div>
                      <div class="name">{{item.name}}</div>
                      <div class="count">{{item.count}}</div>
                  </div>
                  <!-- <div class="item">
                      <div class="no top">2</div>
                      <div class="name">麦当劳</div>
                      <div class="count">123</div>
                  </div>
                  <div class="item">
                      <div class="no top">3</div>
                      <div class="name">麦当劳</div>
                      <div class="count">123</div>
                  </div>
                  <div class="item">
                      <div class="no ">4</div>
                      <div class="name">麦当劳</div>
                      <div class="count">123</div>
                  </div> -->
              </div>
          </div>
      </div>
  </el-card>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'MidelView',
  data(){
      return{
          activeIndex:'1',
          time1:'本周',
          time2:[],//收集选择的两个日期值 应该是一个数组
          pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
            },
        value1: '',
        value2: ''
      }
  },  
  methods:{
      //点击menu-item 时候更新 activeIndex
      handleSelect(value){
          console.log(value),
          this.activeIndex = value;
      },
      //初始化图表
      getOption(){
          const text = this.activeIndex === '1' ? '销售额趋势' : '访问量趋势'
          const xAxisData =  this.activeIndex=== '1' ? this.orderFullYearAxis : this.userFullYearAxis
          const data =  this.activeIndex=== '1' ? this.orderFullYear : this.userFullYear
          return{
              title:{
                  text,
                  textStyle:{
                      fontSize:16
                  },
                  left:18   
              },
              xAxis:{
                  data:xAxisData,
                  //设置坐标轴刻度线和label文字对齐(柱状图)对齐
                  axisTick: {
                    alignWithLabel: true
                }
              },
              yAxis:{
                  //y轴间隔线的类型;
                 splitLine: {
                    lineStyle: {
                        //设置y轴间隔线颜色
                        color: "rgba(232, 61, 61, 1)",
                        //设置y轴间隔线为虚线
                         type: "dotted"
                    }
                }
              },
              series:{
                  type:'bar',
                  data,
                  barWidth:'40%'
              },
              tooltip:{
                //   trigger:'item'
              },
              color:'#3398DB',
              grid:{
                  left:'50px',
                  top:'50px',
                  right:'50px',
                  bottom:'50px'
              }
          }
      }
  },
  /**
   * "//5": "销售额与访问量",
  "orderFullYearAxis": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  "orderFullYear": [410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290],
  "userFullYearAxis": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  "userFullYear": [110, 120, 90, 220, 175, 212, 192, 95, 88, 120, 250, 310],
   "orderRank": [
    {
    "no top": 1,
    "name": "肯德基",
    "count": "323,234"
  }, {
    "no top": 2,
    "name": "麦当劳",
    "count": "299,132"
  }, {
    "no top": 3,
    "name": "肯德基",
    "count": "283,998"
  }, {
    "no top": 4,
    "name": "海底捞",
    "count": "266,223"
  }, {
    "no top": 5,
    "name": "西贝筱面村",
    "count": "223,445"
  }, {
    "no top": 6,
    "name": "汉堡王",
    "count": "219,663"
  }, {
    "no top": 7,
    "name": "真功夫",
    "count": "200,997"
  }],
   * "userRank": [
    {
    "no top": 1,
    "name": "麦当劳",
    "count": "211,335"
  }, {
    "no top": 2,
    "name": "肯德基",
    "count": "210,597"
  }, {
    "no top": 3,
    "name": "必胜客",
    "count": "200,998"
  }, {
    "no top": 4,
    "name": "海底捞",
    "count": "199,220"
  }, {
    "no top": 5,
    "name": "西贝筱面村",
    "count": "195,444"
  }, {
    "no top": 6,
    "name": "汉堡王",
    "count": "180,161"
  }, {
    "no top": 7,
    "name": "真功夫",
    "count": "172,995"
  }],
   * 
  */
  computed:{
    ...mapState({
        orderFullYearAxis:state =>state.data.reportData.orderFullYearAxis || [],
        orderFullYear:state =>state.data.reportData.orderFullYear || [],
        userFullYearAxis:state =>state.data.reportData.userFullYearAxis || [],
        userFullYear:state =>state.data.reportData.userFullYear || [],
        orderRank:state =>state.data.reportData.orderRank || [],
        userRank:state =>state.data.reportData.userRank || [],
    }),
    //ranklist  排行榜数据
    ranklist (){
        return this.activeIndex === '1'? this.orderRank :this.userRank
    }
  }
}
</script>

<style lang="scss"scoped>
.middle-view {
    margin-top:20px;
    ::v-deep.el-card__header{
        border-bottom:none;//利用深度作用域选择器修改第三方组件样式 不显示card底部的线条
        //去掉el-card__header 的padding导致上方的空白,效果减小上方空白
        padding:0 20px;
        position: relative;
        .right{
            position: absolute;
            top:0;
            right: 20px;
            height: 100%;
            display: flex;
            align-items: center;
            .el-date-editor{
                margin-left: 20px;
            }
        }
    }
    .content{
        height: 270px;
        display: flex;
        .echarts{
            flex: 5;
        }
        .rank-list{
            flex: 2;
            .title{
                font-size: 20px;
                margin-top:10px 0;
            }
            .list{
                .item{
                    display: flex;
                    align-items: center;
                    height:20px;
                    margin:6px 20px 6px 0;
                }
                .no {
                    width:20px;
                    height: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .top{
                    background-color: #000;
                    border-radius:10px;
                    color:#fff;
                }
                .name{
                    margin-left:20px;
                }
                .count{
                    flex: 1;
                    text-align: right;
                }
            }
        }
    }
    
}
</style>